<script>
import { page, statusOptions, remove, dwLog, dwFile } from "@/api/robot/taskStatement";
import { typeOptions } from "@/api/robot/robotTaskAdPushUnit";
import { globalLoading, isNull } from "@/utils/service";

export default {
  name: "index",
  data() {
    return {
      query: {
        lookMe: true,
        statementId: undefined,
        taskStatus: undefined,
        pushUnitId: undefined,
        pushUnitName: "",
        pushTaskType: undefined,
        adId: undefined,
        taskId: undefined,
        taskName: "",
        robotNumber: undefined,
        pageNo: 1,
        pageSize: 10
      },
      options: {
        taskStatus: {
          data: [],
          loading: true,
          loadingText: "加载中...."
        },
        pushTaskType: {
          data: [],
          loading: true,
          loadingText: "加载中...."
        }
      },
      table: {
        loading: false,
        data: [],
        total: 0,
        pages: 0,
        selectIds: []
      }
    };
  },
  created() {
    this.getTable();
  },
  methods: {
    isNull,
    removeReq(ids) {
      let _ = this;
      let loading = globalLoading(this);
      remove(ids).then(r => {
        _.$message.success("删除成功");
        _.getTable();
      }).finally(() => {
        loading.close();
      });
    },
    dwFileReq(id) {
      let _ = this;
      let loading = globalLoading(this);
      dwFile(id).then(r => {
        _.$download.download0(r.bold, r.fileName, r.bold.type);
      }).finally(() => {
        loading.close();
      })
    },
    dwLogReq(id) {
      let _ = this;
      let loading = globalLoading(this);
      dwLog(id).then(r => {
        _.$download.download0(r.bold, r.fileName, r.bold.type);
      }).finally(() => {
        loading.close();
      });
    },
    getTable() {
      this.table.loading = true;
      page(this.query).then(r => {
        this.table.data = r.list;
        this.table.total = r.total;
        this.table.pages = r.pages;
      }).finally(() => {
        this.table.loading = true;
      });
    },
    getStatusOption() {
      let _ = this;
      _.options.taskStatus.loading = true;
      statusOptions().then(r => {
        _.options.taskStatus.data = r;
      }).finally(() => {
        _.options.taskStatus.loading = false;
      });
    },
    getPushTaskType() {
      let _ = this;
      _.options.pushTaskType.loading = true;
      typeOptions().then(r => {
        _.options.pushTaskType.data = r;
      }).finally(() => {
        _.options.pushTaskType.loading = false;
      });
    },
    pageSizeChange(v) {
      this.query.pageSize = v;
      this.getTable();
    },
    pageNoChange(v) {
      this.query.pageNo = v;
      this.getTable();
    },
    tbSelectChange(v) {
      this.table.selectIds = v.map(i => i.id);
    },
    resetQuery(){
      this.query.statementId = undefined
      this.query.taskStatus = undefined
      this.query.pushUnitId = undefined
      this.query.pushUnitName = ""
      this.query.pushTaskType = undefined
      this.query.adId = undefined
      this.query.taskId = undefined
      this.query.taskName = ""
      this.query.robotNumber = undefined
      this.getTable()
    }
  }
};
</script>

<template>
  <div>
    <!-- 头部 -->
    <div style="margin: 5px 0">
      <el-form :model="query" :inline="true" size="mini">
        <el-form-item prop="lookMe">
          <el-radio-group v-model="query.lookMe" @input="getTable">
            <el-radio :label=true>只看我自己</el-radio>
            <el-radio :label=false>查看所有报表</el-radio>
          </el-radio-group>
        </el-form-item>
        <br />
        <el-form-item label="编号" prop="statementId">
          <el-input v-model="query.statementId" placeholder="报表编号(精确)" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务类型" prop="taskType">
          <el-select v-model="query.pushTaskType" placeholder="选择任务类型" @focus="getPushTaskType" clearable
                     :loading-text="options.pushTaskType.loadingText" :loading="options.pushTaskType.loading">
            <el-option
              v-for="item in options.pushTaskType.data"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务状态" prop="taskStatus">
          <el-select v-model="query.taskStatus" placeholder="选择任务状态" @focus="getStatusOption" clearable
                     :loading-text="options.taskStatus.loadingText" :loading="options.taskStatus.loading">
            <el-option
              v-for="item in options.taskStatus.data"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布单元编号" prop="pushUnitId">
          <el-input v-model="query.pushUnitId" placeholder="发布单元编号(精确)" clearable></el-input>
        </el-form-item>
        <el-form-item label="发布单元名称" prop="pushUnitName">
          <el-input v-model="query.pushUnitName" placeholder="发布单元名称(模糊)" clearable></el-input>
        </el-form-item>
        <el-form-item label="管理员编号" prop="adId">
          <el-input v-model="query.adId" placeholder="管理员编号(精确)" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务编号" prop="taskId">
          <el-input v-model="query.taskId" placeholder="任务编号(精确)" clearable></el-input>
        </el-form-item>
        <el-form-item label="任务名称" prop="taskName">
          <el-input v-model="query.taskName" placeholder="任务名称(模糊)" clearable></el-input>
        </el-form-item>
        <el-form-item label="机器编号" prop="robotNumber">
          <el-input v-model="query.robotNumber" placeholder="机器编号(精确)" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="getTable">搜索</el-button>
          <el-button size="mini" type="info" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-popconfirm
          title="是否删除已经选中的数据？"
          @confirm="removeReq(table.selectIds)"
        >
          <el-button slot="reference" size="mini" type="danger" :disabled="this.table.selectIds.length === 0">
            删除选中项
          </el-button>
        </el-popconfirm>

      </div>
    </div>
    <!--  表格内容  -->
    <div>
      <el-table
        :row-style="{height: '20px'}"
        :cell-style="{padding: '3px 0'}"
        height="64vh"
        :v-loading="table.loading"
        :data="table.data"
        :stripe=true
        :border=true
        @selection-change="tbSelectChange"
      >
        <el-table-column
          type="selection"
          width="55"
          fixed="left"
        >
        </el-table-column>

        <el-table-column
          prop="pushTaskUnitName"
          label="发布单元名称"
          width="200"
          align="center"
          fixed="left"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="taskName"
          label="任务名称"
          width="200"
          align="center"
          fixed="left"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="taskId"
          label="任务编号"
          width="100"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="pushTaskUnitId"
          label="发布单元编号"
          width="120"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="adId"
          label="管理员编号"
          width="100"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="robotNumber"
          label="机器编号"
          width="180"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="robotIp"
          label="机器 IP"
          width="120"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="id"
          label="编号"
          width="180"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="createTime"
          label="创建时间"
          width="120"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="updateTime"
          label="修改时间"
          width="120"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>

        <el-table-column
          prop="taskType"
          label="任务类型"
          width="100"
          align="center"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-tag v-if="row.taskType === 1" effect="dark" type="info" size="mini">一般任务</el-tag>
            <el-tag v-else-if="row.taskType === 2" effect="dark" size="mini">定时任务</el-tag>
            <el-tag v-else effect="dark" size="mini" type="warning">未知</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="taskStatus"
          label="任务状态"
          width="80"
          align="center"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-tag v-if="row.taskStatus === 0" effect="dark" type="info" size="mini">未开始</el-tag>
            <el-tag v-else-if="row.taskStatus === 1" effect="dark" size="mini">执行中</el-tag>
            <el-tag v-else-if="row.taskStatus === 2" effect="dark" size="mini" type="success">已结束</el-tag>
            <el-tooltip v-else-if="row.taskStatus === 3" :content="row.errMsg" placement="top" effect="dark">
              <el-tag effect="dark" size="mini" type="danger">已失败</el-tag>
            </el-tooltip>

            <el-tag v-else effect="dark" size="mini" type="warning">未知</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          width="120"
          label="操作"
          align="center"
          fixed="right"
        >
          <template slot-scope="{row}">
            <el-tooltip v-permission="'robot.taskStatement.dwFile'" v-if="!isNull(row.taskFileSuffix)"
                        content="点击下载报表" placement="top" effect="dark" style="margin-right: 10px;">
              <em @click="dwFileReq(row.id)" style="font-size: 21px;color: #2ed573"
                  class="el-icon-document-checked"></em>
            </el-tooltip>
            <el-tooltip v-permission="'robot.taskStatement.dwLog'" content="点击下载日志" placement="top" effect="dark"
                        style="margin-right: 10px;">
              <em @click="dwLogReq(row.id)" style="font-size: 21px;color: #f39c12" class="el-icon-notebook-1"></em>
            </el-tooltip>
            <el-popconfirm
              v-permission="'robot.taskStatement.delete'"
              title="确认删除此报表吗？"
              @confirm="removeReq([row.id])"
            >
              <em slot="reference" style="font-size: 21px;color: #ff4757" class="el-icon-delete"></em>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  分页内容  -->
    <div>
      <div style="text-align: center;margin: 10px 0">
        <el-pagination
          background
          layout="sizes,prev, pager, next, jumper, ->, total"
          :total="table.total"
          :page-size="query.pageSize"
          :current-page="query.pageNo"
          :page-count="table.pages"
          :page-sizes="[10,30,50,100]"
          @size-change="pageSizeChange"
          @current-change="pageNoChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<style scoped>
</style>